import React, {useState} from 'react';
import {Button, Col, ConfigProvider, Divider, Drawer, Input, Row, Space} from "antd";

import '@/css/workflow.less'
import './index.less'
import Card from 'antd/es/card/Card';
import AddNode from "@/pages/WorkFlowDesigner/Node/AddNode";
import {CloseOutlined} from "@ant-design/icons";
import {APPROVAL_NODE_WIDTH} from "@/constant/Approval";

/**
 * 审核节点
 */
interface ConfigProps {
    type: string,
    nodeName: string
}


export default React.memo(() => {
    const [open, setOpen] = useState<boolean>(false);
    // 当前节点的
    let [config, setConfig] = useState({nodeUserList: []})
    let [title, setTitle] = useState<string>("审核人")
    // 默认文本
    let [defaultText, setDefaultText] = useState<string>('')
    // 节点展示文字
    let [showText, setShowText] = useState<string>('')
    //
    let [isInputList, setIsInputList] = useState([])
    let [isInput, setIsInput] = useState<boolean>(false);

    const showDrawer = () => {
        setOpen(true);
    };

    const onClose = () => {
        saveNode();
    };

    const saveNode = () => {
        setOpen(false);
        // 保存数据

    }
    const closeDrawer = () => {
        setOpen(false);

    }

    function setPerson() {
        setOpen(true)

    }

    let isTried;

    const delNode = () => {
        console.log("删除节点")
    }


    return (
        <div>

            <Row justify="center">
                <Col>
                    <div className="node-wrap">
                        {/*自定义卡片主题*/}
                        <ConfigProvider
                            theme={{
                                components: {
                                    Card: {
                                        headerBg: "#FF943E",
                                        headerHeight: 24,
                                        /* here is your component tokens */
                                    },
                                },
                            }}
                        >
                            {/*  自定义节点标题  */}
                            <Card hoverable
                                  title={<Input value={title} onChange={e => setTitle(e.target.value)} bordered={false}
                                                autoFocus/>}
                                  extra={<Button type="text" onClick={delNode} size="small" icon={<CloseOutlined/>}/>}
                                  style={{width: APPROVAL_NODE_WIDTH}}
                                  size="small"
                                  className="approval-node-card"
                            >
                                <div className="content" onClick={() => setPerson()}>
                                    <div className="text">
                                        {!showText ? <span className="placeholder">请选择{defaultText}</span> : showText}
                                    </div>
                                    <i className="ant-icon ant-icon-right arrow"></i>
                                </div>
                                {(isTried) ? <div className="error_tip">
                                    <i className="ant-icon ant-icon-exclamation-circle"></i>
                                </div> : ''}

                            </Card>
                        </ConfigProvider>
                        <AddNode nodeId="0"/>


                    </div>

                </Col>
            </Row>


            <Drawer title="发起人" width={550} placement="right" closable={false} onClose={onClose} open={open}
                    className="set-start-node">
                <div className="drawer-content node-content">
                    <div className="start-node drawer-content">
                        <p>{'所有人'}</p>
                        <Button type="primary" onClick={showDrawer}>添加/修改发起人</Button>
                    </div>
                    <div className="drawer-footer">
                        <Space>
                            <Divider/>
                            <Button type="primary" onClick={saveNode}>确 定</Button>
                            <Button onClick={closeDrawer}>取 消</Button>

                        </Space>

                    </div>
                </div>
            </Drawer>

        </div>
    )
})
